<template>
  <div>
    <div class="tou">项目信息管理 <span>项目总览</span></div>
    <div class="head">
      <div class="kuai">
        <div class="tu">
          <i class="el-icon-s-flag"></i>
        </div>
        <div class="font">
          <p>进行中的项目</p>
          <b>3</b>
        </div>
      </div>
      <div class="kuai">
        <div
          class="tu"
          style="backgroundColor:#3c8dbc"
        >
          <i class="el-icon-star-on"></i>
        </div>
        <div class="font">
          <p>重点项目</p>
          <b>1</b>
        </div>
      </div>
      <div class="kuai">
        <div
          class="tu"
          style="backgroundColor:#dd4b39"
        >
          <i class="el-icon-document-delete"></i>
        </div>
        <div class="font">
          <p>超期项目</p>
          <b>1</b>
        </div>
      </div>
      <div class="kuai">
        <div
          class="tu"
          style="backgroundColor:#00a65a"
        >
          <i class="el-icon-circle-check"></i>
        </div>
        <div class="font">
          <p>近7天完成项目</p>
          <b>0</b>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="one">
        <div class="head">
          <h3>安装一个大型设备</h3>
          <div>
            <el-dropdown>
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>更新进度</el-dropdown-item>
                <el-dropdown-item>查看历史</el-dropdown-item>
                <el-dropdown-item divided>批示操作</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="content">
          <ul>
            <li>部门:总公司</li>
            <li>项目负责人:张三</li>
            <li>项目编号:A0001</li>
            <li>开始日期:2022-10-27</li>
            <li>已持续<span>10</span>天</li>
            <li>更新时间:<span>前天</span></li>
          </ul>
        </div>
        <div class="n-foot">
          <p>由张三创建</p>
        </div>
      </div>
      <div class="two">
        <div class="head">
          <h3>冲压机的设备问题联系厂家修复</h3>
          <el-dropdown>
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>更新进度</el-dropdown-item>
              <el-dropdown-item>查看历史</el-dropdown-item>
              <el-dropdown-item divided>批示操作</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="content">
          <ul>
            <li>部门:总公司</li>
            <li>项目负责人:张三</li>
            <li>项目编号:A0002</li>
            <li>开始日期:2022-10-30</li>
            <li>已持续<span style="backgroundColor:red;">7</span>天</li>
            <li>更新时间:<span>昨天</span></li>
          </ul>
        </div>
        <div class="f-foot">
          <p>1.厂家正在查找问题中</p>
        </div>
      </div>
      <div class="three">
        <div class="head">
          <h3>注塑机产线安装调试</h3>
          <div>
            <el-dropdown>
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>更新进度</el-dropdown-item>
                <el-dropdown-item>查看历史</el-dropdown-item>
                <el-dropdown-item divided>批示操作</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="content">
          <ul>
            <li>部门:总公司/设备部</li>
            <li>项目负责人:李四</li>
            <li>项目编号:A0003</li>
            <li>开始日期:2022-10-27</li>
            <li>已持续<span>7</span>天</li>
            <li>更新时间:<span>昨天</span></li>
          </ul>
        </div>
        <div class="n-foot">
          <p>1.厂家正在查找问题中</p>
          <p>2.设备开始维修</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.tou {
  font-size: 26px;
  padding: 10px;
  span {
    font-size: 14px;
    color: #909292;
  }
}
.head {
  display: flex;
  justify-content: space-between;
  .kuai {
    flex: 1;
    display: flex;
    .tu {
      width: 90px;
      height: 90px;
      font-size: 50px;
      background-color: #001f3f;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .font {
      background-color: #fff;
      width: 190px;
      padding: 10px;
    }
  }
}
.content {
  .one,
  .two,
  .three {
    margin-top: 30px;
    background-color: #fff;
    border-top: 3px solid #eee;
    padding: 10px;
    .head {
      display: flex;
      justify-content: space-between;
    }
    .content {
      border-top: 1px solid #eee;
      padding-right: 80px;
      margin: 5px 0;
      padding-top: 10px;
    }
    ul {
      font-size: 12px;
      color: #6b7076;
      display: flex;
      justify-content: space-between;
      span {
        display: inline-block;
        padding: 2px;
        font-size: 12px;
        background-color: #3c8dbc;
        color: #fff;
      }
    }
  }
  .two {
    border-top: 5px solid #dd4b39;
  }
  .three {
    border-top: 5px solid #3c8dbc;
  }
}
</style>